<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title th:utext="${essebtial.title}"></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <link th:href="${essebtial.icon}" rel="icon" type="image/x-icon">
  <link th:href="@{/css/admin.css}" rel="stylesheet">
  <link th:href="@{/css/public/animate/animate.css}" rel="stylesheet">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item">
        <a class="kit-side-fold"><i class="layui-icon layui-icon-spread-left"></i></a>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item ">
        <a class="menu-items layui-icon layui-icon-notice" data-url="/share/msg" title="未读消息" id="msg"><span th:if="${msgCount}" class="layui-badge" id="jelly-badge" th:utext="${msgCount}" th:value="${msgCount}"></span></a>
      </li>
      <li class="layui-nav-item ">
        <a class="menu-items layui-icon layui-icon-log" data-url="/share/operation" title="最近操作"></a>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <div class="logo-element">Jelly</div>
      <div class="user-photo">
        <ul class="layui-nav">
          <a class="img" title="我的头像" >
            <img th:src="${user.img}" >
          </a>
          <li class="layui-nav-item">
            <p><span th:utext="${user.userName}"></span>,欢迎登录</p>
            <p class="muted" th:utext="'部门: '+${dept.deptName}" ></p>
            <ul class="layui-nav-child">
              <li lay-unselect><a class="J_menuItems" href="javascript:" date-href="/share/user-infor" title="个人资料"><cite>个人资料</cite></a></li>
              <hr>
              <li lay-unselect><a class="logout" href="/logout"><cite>安全退出</cite></a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="jelly-menu"></div>
    </div>
  </div>

  <div class="layui-body page-content">
    <div class="content-tabs">
      <button class="roll-nav roll-left J_tabLeft">
        <i class="layui-icon layui-icon-prev"></i>
      </button>
      <nav class="page-tabs J_menuTabs">
        <div class="page-tabs-content">
          <a href="javascript:;" class="active J_menuTab"  data-id="/share/welcome"><span class="layui-icon layui-icon layui-icon-home"></span>首页</a>
        </div>
      </nav>
      <button class="roll-nav roll-right J_tabRight">
        <i class="layui-icon layui-icon-next"></i>
      </button>
    </div>

    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show J_mainContent">
        <iframe class="J_iframe" name="iframe0" width="100%" height="100%" frameborder="0" data-id="/share/welcome" src="/share/welcome" seamless></iframe>
      </div>
    </div>
  </div>
  <div class="layui-footer">
    <div class="pull-right" th:utext="${essebtial.icpNumber}"></div>
  </div>
</div>

<script th:src="@{/js/public/jquery/jquery.min.js}"></script>
<script th:src="@{/js/public/layui/layui.all.js}"></script>
<script th:src="@{/js/layer/layer.js}"></script>
<script th:inline="javascript" >
    var menu = [[${menu}]];
    $('.menu-items').click(function(){
        layer.open({
            type:2,
            title:$(this).attr('title'),
            area: ['270', 'calc(100% - 50px)'],
            offset: 'rb',
            shadeClose:true,
            shade:0.2,
            closeBtn:0,
            isOutAnim:false,
            resize:false,
            move: false,
            content: $(this).data('url')
        });
    });

    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://"+window.location.host+"/websocket/"+[[${user.userId}]]);
    }
    else{
        alert('当前浏览器不支持在线消息发送')
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        var massage = JSON.parse(event.data),
            inter = $('#jelly-badge').attr('value');
        if("NOTICE" == massage.type || "INFORMNOTICE" == massage.type){
            //示范一个公告层
            layer.open({
                type: 1
                ,title: false //不显示标题栏
                ,closeBtn: false
                ,area: '300px;'
                ,shade: 0.8
                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                ,resize: false
                ,btn: ['火速围观', '残忍拒绝']
                ,btnAlign: 'c'
                ,moveType: 1 //拖拽模式，0或者1
                ,content: '<div style="padding: 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">'+massage.content+'</div>'
                ,success: function(layero){
                }
            });

        }else{
            if(inter){
                var count = parseInt(inter)+1;
                $('#jelly-badge').val(count);
                $('#jelly-badge').html(count);
            }else{
                $('#msg').html('<span class="layui-badge" id="jelly-badge" value="1">1</span>');
            }
        }

    };
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    };
</script>
<script th:src="@{/js/jelly/index.js}"></script>
<script th:src="@{/js/jelly/app.js}"></script>
<script th:src="@{/js/jelly/contabs.js}"></script>
<script th:utext="${essebtial.statistics}"></script>
</body>
</html>